<template>
	<sl-page :title="categoryName">
		<view class="goodsIndex-tab">
			<view class="goodsIndex">
				<Sort :sortDatas="sortDatas" @sort:click="handleSortType"></Sort>
			</view>
		</view>
		<z-paging ref="paging" :paging-style="{'margin-top':top + 'px'}" v-model="goodsList" @query="loadPage">
			<view class="page-goods">
				<Goods ref="goods" :gridDatas="goodsList" />
			</view>
		</z-paging>
	</sl-page>
</template>

<script>
	import GoodsApi from '@/api/goods/goods.js';
	import Constants from '@/constants';
	import Search from '@/pages/components/search/search.vue';
	import Sort from '@/pages/components/sort/sort.vue';
	import Goods from '@/pages/components/goods/goods.vue';

	export default {
		name: 'goodsIndex',
		//
		mixins: [Constants],
		//
		components: {
			Search,
			Sort,
			Goods,
		},
		//
		data() {
			return {
				goodsList: [],
				top: '',
				options: {},
				query: {},
				categoryName: '',
				categoryId: '',
				sortDatas: [{
					isSort: false,
					sortField: 'newFlag',
					sortName: '新品'
				}, {
					isSort: false,
					sortField: 'sales',
					sortName: '销量'
				}, {
					isSort: false,
					sortField: 'price',
					sortName: '价格'
				}],
				//排序
				orderBy: [],
			};
		},
		//
		onLoad(options) {
			this.options = options;
			//
			this.initPara();
			//
		},
		//
		onShow() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				
				query.select('.goodsIndex-tab').boundingClientRect(data => {
					this.top = this.CustomBar + data.height;
				}).exec();
			});
		},
		//
		methods: {
			//初始化参数
			initPara() {
				this.categoryName = this.options.categoryName ? this.options.categoryName : '';
				 this.query.name = this.options.searchName;
				this.categoryId = this.options.categoryId ? this.options.categoryId : '';
				this.query.categoryId = this.categoryId;
			},
			//切换排序方式
			handleSortType(item) {
				//this.reset();
				this.dohandleSortType(item);
				this.loadPage();
			},
			//
			dohandleSortType(item) {
				if (item) {
					const options = {
						newFlag: 'newFlag:desc',
						sales: 'sales:desc',
						price: 'price:desc'
					};
					if (item.sortField && item.isSort && options[item.sortField]) {
						this.orderBy.push(options[item.sortField]);
					} else {
						this.orderBy = this.orderBy.filter(order => {
							const [key] = order.split(':');
							return key !== item.sortField;
						});
					}
					this.param.orderBy = this.orderBy.join(';')
				}
			},
			//
			loadPage: async function() {
				try {
					console.log('this.query: ', this.query);
					const res = await GoodsApi.query(this.query, this.param);
					console.log('res.obj:', res.obj);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error(error);
					this.$refs.paging.complete(false);
				}
			},
			//跳转商品详情页
			toTargetDetail(id) {
				this.$app.navTo(this.pages.goodsDetailPage, {
					goodsId: id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goodsIndex {
		border-top: 1px solid #EEE;
	}

	.page-goods {
		background: $uni-bg-color-grey;
		padding: 12rpx 32rpx;
	}
</style>